<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>

    <title>表单</title>
</head>
<style>
    .center {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page {
        /*         
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); 
        */
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        /* background: rgba(0, 0, 0, .5); */
    }

    #edit-form {
        margin: 0 20px 20px 20px;
    }
</style>

<body>
    <div style="position: relative;height: 100%;">
        <div id="edit" class="page" style="display: none; z-index: 1;background: rgba(0, 0, 0, .5);">
            <div class="center">
                <div style="background-color: #fff;border-radius: 3%;">
                    <h1 style="text-align: center;">修改信息</h1>
                    <form id="edit-form" autocomplete="off">
                        <div>
                            姓名：<input type="text" name="username">
                        </div>
                        <div>
                            密码：<input type="text" name="psd">
                        </div>
                        <div>
                            角色：<input type="text" name="role">
                        </div>
                        <div>
                            <button type="button" onclick="update()">更新</button>
                            <button type="button" onclick="cancel()">取消</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <div class="page" style="z-index: 0;">
            <div class="center">
                <div>
                    <h1>新增信息</h1>
                    <form id="info-form" autocomplete="off">
                        <div>
                            姓名：<input type="text" name="username">
                        </div>
                        <div>
                            密码：<input type="text" name="psd">
                        </div>
                        <div>
                            角色：<input type="text" name="role">
                        </div>
                        <div>
                            <button type="button" onclick="add()">提交</button>
                        </div>
                    </form>
                </div>
                <div>
                    <h1>信息展示</h1>
                    <table id="my-tb">
                        <thead>
                            <tr>
                                <th>username</th>
                                <th>psd</th>
                                <th>role</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="tb-body">
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- </div> -->
        </div>


        <script>
            const idNum = 0
            let singleID;
            $(document).ready(loadInfo())
            /* 
            更新表格
            */
            function updateInfo(data) {
                $("#tb-body").empty()
                $.each(data, function (index, item) {
                    let row =
                        '<tr><td style="display:none">' +
                        item.id + "</td><td>" +
                        item.username + "</td><td>" +
                        item.psd + "</td><td>" +
                        item.role + "</td><td>" +
                        "<button onclick='edit(this)'>修改</button>" +
                        "<button onclick='del(this)'>删除</button>" +
                        "</td></tr>";
                    $("#tb-body").append(row);
                })
            }
            /* 
            加载信息
                */
            function loadInfo() {
                $.ajax({
                    url: "/info",
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        console.log(data);
                        updateInfo(data)
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }
            /* 
            新增
                */
            function add() {
                let data = {};
                let value = $('#info-form').serializeArray();
                $.each(value, function (index, item) {
                    data[item.name] = item.value;
                });
                let json = JSON.stringify(data);
                console.log(json);
                $.ajax({
                    url: "/info",
                    data: json,
                    contentType: 'application/json',
                    type: 'post',
                    success: function (data) {
                        //清空表单
                        loadInfo()// 重新加载表单
                        updateInfo(data) // 更新表格
                        $('#info-form').get(0).reset();//转换为dom元素调用reset方法
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }
            /* 
            删除
                */
            function del(val) {
                // 获取id值 √
                let value = $(val).parent().parent().find("td")
                let id = value.eq(idNum).text();
                // 传回id值 √
                $.ajax({
                    url: "/info/" + id,
                    type: "delete",
                    success: function (data) {
                        loadInfo();// 重新获取信息
                        updateInfo(data); // 更新表格
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }
            /* 
            获取需要修改的信息
                */
            function edit(val) {
                let info = [];
                $(val).parent().parent().children().each((i, item) => {
                    console.log("index", i, "item", $(item).text());
                    info.push($(item).text())
                }); // 获取数据
                info = info.slice(0, -1); // 去掉按钮文本                
                $("#edit-form input").each((i, item) => {
                    $(item).val(info[i + 1])
                })// 绑定数据
                singleID = info[idNum];// 保存id
                show();// 显示表单
            }
            /* 
            更新
                */
            function update() {
                let newInfoVal = $("#edit-form").serializeArray();
                let newInfo = {}
                $.each(newInfoVal, (i, item) => {
                    newInfo[item.name] = item.value
                })
                newInfo = JSON.stringify(newInfo)
                $.ajax({
                    url: "/info/" + singleID,
                    type: "put",
                    data: newInfo,
                    contentType: 'application/json',
                    success: (res) => {
                        console.log(res);
                        cancel()// 隐藏表单
                        loadInfo()// 重新加载表单
                        updateInfo(res) // 更新表格
                    },
                    error: (err) => {
                        console.log(err);
                    }
                })

            }
            /* 
            显示修改表单
                */
            function show() {
                $('#edit').css("display", "")
            }
            /* 
            隐藏修改表单
                */
            function cancel() {
                $('#edit').css("display", "none")
            }
        </script>
</body>

</html>